<template>
	<view class="main-page" style="background-color: white;">
		
		<view class="column-container width-100p" v-if="dataList.length > 0">
			<view class="data-item" v-for="(item , index) in dataList" :key="index">
				<view class="sub-item">
					<view class="row-container">
						<!-- <image class="img"></image> -->
						<view class="column-container">
							<text class="font-333-32 font-weight-600" style="margin-bottom: 7rpx;">{{item.intro}}</text>
							<text class="font-999-26">{{item.createTime}}</text>
						</view>
					</view>
					<view class="column-container-row-end">
						<text class="font-ffd-32" :style="{'font-family' : fontNameMedium}"
						 style="font-weight: 500;margin-bottom: 11rpx;font-weight: 500;"
						 v-if="item.type == 0">+{{item.amount}}</text>
						<text class="font-333-32"  :style="{'font-family' : fontNameMedium}"
						style="font-weight: 500;margin-bottom: 11rpx;font-weight: 500;"
						 v-if="item.type == 1">-{{item.amount}}</text>
						<!-- <text class="font-999-26">提现已到账</text> -->
					</view>
				</view>
				<view class="divider-line"/>
			</view>
		</view>
		
		<NoData v-else type="scoreRecord"></NoData>
		
		<groupImgWindow ref="groupImgWindow" ></groupImgWindow>
	</view>
</template>

<script>
	import NoData from '../../components/nodata.vue'
	import groupImgWindow from '../../components/groupImgWindow.vue'
	
	export default {
		data() {
			return {
				dataList:[],
				page:1,
				hasMoreData:false,
				
				fontNameMedium:"fontNameMedium",
				fontUrl:'https://jxshoss.oss-cn-qingdao.aliyuncs.com/jxsh/HONORSans-Medium.ttf',
			}
		},
		
		components:{
			NoData,
			groupImgWindow
		},
		
		onLoad() {
			this.loadRecord()
			let that = this
			uni.$on("openGroupImgWindow" , (data)=>{
				console.log("openGroup------" , data)
				if (data == "scoreRecord"){
					that.$refs.groupImgWindow.showGroupImg = true
				}
			})
			
			uni.loadFontFace({
				family:this.fontNameMedium,
				source:this.fontUrl,
				success() {
					
				}
			})
		},
		
		onPullDownRefresh() {
			this.page = 1
			this.loadRecord()
		},
		
		onReachBottom() {
			if (this.hasMoreData){
				this.page ++ 
				this.loadRecord()
			}
		},
		
		methods: {
			loadRecord(){
				let that = this
				this.http({
					url:'/account/accountList',
					method:'POST',
					data:{
						pageNo : that.page,
						pageSize : 15
					},
					success(res){
						if (res.code == 200){
							if (that.page == 1){
								that.dataList = res.data
							} else{
								that.dataList = [...that.dataList, ...res.data]
							}
							that.hasMoreData = res.data.length >= 15
						}
						uni.stopPullDownRefresh()
					},
					failed(e){
						uni.stopPullDownRefresh()
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.data-item{
		display: flex;
		flex-direction: column;
		width: 100%;
		
		.sub-item{
			display: flex;
			flex-direction: row;
			width: calc(100% - 60rpx);
			padding: 38rpx 30rpx;
			align-items: center;
			justify-content: space-between;
			
			.img{
				width: 80rpx;
				height: 80rpx;
				margin-right: 34rpx;
				border-radius: 40rpx;
			}
		}
		.divider-line{
			width: calc(100% - 60rpx);
			height: 1rpx;
			background-color: #D9D9D9;
			margin-left: 30rpx;
		}
		
		
	}
</style>
